<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Admin 学习项目 - 专业管理后台演示</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.loli.net/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 动画背景粒子 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 1px, transparent 1px),
                radial-gradient(circle at 50% 10%, rgba(255,255,255,0.06) 0.5px, transparent 0.5px);
            background-size: 50px 50px, 80px 80px, 30px 30px;
            z-index: -1;
            animation: float 20s ease-in-out infinite;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
            z-index: -1;
            animation: shine 8s ease-in-out infinite;
        }

        @keyframes shine {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        /* 玻璃态效果 */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        /* 头部区域 */
        .hero-section {
            padding: 120px 0 80px;
            text-align: center;
            color: white;
            position: relative;
        }

        .hero-title {
            font-size: 4.5rem;
            font-weight: 800;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 50px rgba(255,255,255,0.3);
            animation: fadeInUp 1s ease-out, textGlow 3s ease-in-out infinite alternate;
        }

        @keyframes textGlow {
            from { filter: drop-shadow(0 0 20px rgba(255,255,255,0.3)); }
            to { filter: drop-shadow(0 0 30px rgba(255,255,255,0.6)); }
        }

        .hero-subtitle {
            font-size: 1.5rem;
            font-weight: 400;
            margin-bottom: 50px;
            opacity: 0.95;
            line-height: 1.8;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        .hero-icon {
            font-size: 4rem;
            margin-bottom: 30px;
            background: linear-gradient(45deg, #fff, #f0f0f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: bounce 2s infinite, rotate 10s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 特性卡片 */
        .feature-card {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 35px 25px;
            text-align: center;
            color: white;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.6s;
        }

        .feature-card:hover::before {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-15px) scale(1.05);
            background: rgba(255,255,255,0.18);
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
            filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
            transition: transform 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }

        /* 管理后台卡片 */
        .admin-card {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: none;
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
            height: 100%;
            position: relative;
        }

        .admin-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .admin-card:hover::before {
            opacity: 1;
        }

        .admin-card:hover {
            transform: translateY(-20px) scale(1.03);
            box-shadow: 0 30px 80px rgba(0,0,0,0.25);
        }

        .admin-card-header {
            padding: 30px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .admin-card-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: -50px;
            width: 100px;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: skew(-20deg);
            transition: transform 0.6s ease;
        }

        .admin-card:hover .admin-card-header::after {
            transform: translateX(300px) skew(-20deg);
        }

        .admin-card-body {
            padding: 35px 30px;
        }

        .admin-btn {
            border-radius: 15px;
            padding: 15px 30px;
            font-weight: 600;
            text-transform: none;
            transition: all 0.4s ease;
            border: none;
            position: relative;
            overflow: hidden;
            font-size: 1.1rem;
        }

        .admin-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.6s ease;
        }

        .admin-btn:hover::before {
            left: 100%;
        }

        .admin-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        /* 渐变背景类 */
        .bg-primary-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .bg-secondary-gradient {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .bg-success-gradient {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .bg-warning-gradient {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        .bg-info-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .bg-danger-gradient {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        /* 信息卡片 */
        .info-card {
            background: white;
            border-radius: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
            border: none;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 80px rgba(0,0,0,0.18);
        }

        .info-card-body {
            padding: 45px;
        }

        /* 特殊效果类 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* 动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounce {
            0%, 20%, 53%, 80%, 100% {
                transform: translate3d(0,0,0);
            }
            40%, 43% {
                transform: translate3d(0,-15px,0);
            }
            70% {
                transform: translate3d(0,-7px,0);
            }
            90% {
                transform: translate3d(0,-2px,0);
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            .hero-subtitle {
                font-size: 1.1rem;
            }
            .feature-card {
                margin-bottom: 20px;
            }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="container-fluid px-4 py-5">
        <!-- 英雄区域 -->
        <div class="hero-section">
            <div class="container">
                <div class="hero-icon">
                    <i class="bi bi-gear-wide-connected"></i>
                </div>
                <h1 class="hero-title">
                    Django Admin 学习项目
                </h1>
                <p class="hero-subtitle">
                    一个全面的Django Admin后台定制学习平台<br>
                    <strong>探索多种管理后台配置 · 体验权限分离管理 · 掌握高级定制技巧</strong>
                </p>
            </div>
        </div>

        <!-- 特性展示 -->
        <div class="container mb-5">
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="feature-card">
                        <div class="feature-icon">📊</div>
                        <h5 class="fw-bold mb-3">数据统计</h5>
                        <p class="mb-0">实时数据分析与可视化展示，直观掌握业务数据</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="feature-card">
                        <div class="feature-icon">🎨</div>
                        <h5 class="fw-bold mb-3">界面定制</h5>
                        <p class="mb-0">个性化管理界面设计，优化用户体验与操作流程</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="feature-card">
                        <div class="feature-icon">🔐</div>
                        <h5 class="fw-bold mb-3">权限管理</h5>
                        <p class="mb-0">精细化权限控制体系，实现安全的多角色管理</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <h5 class="fw-bold mb-3">高级功能</h5>
                        <p class="mb-0">批量操作、智能过滤、导出功能等专业工具</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 管理后台列表 -->
        <div class="container mb-5">
            <div class="text-center mb-5">
                <h2 class="gradient-text fw-bold mb-3">管理后台入口</h2>
                <p class="text-white fs-5">不同角色的专属管理平台，体验权限分离的优势</p>
            </div>
            <div class="row g-4">
                {% for site in admin_sites %}
                <div class="col-lg-6 col-xl-4">
                    <div class="admin-card pulse">
                        <div class="admin-card-header bg-{{ site.color }}-gradient">
                            <h5 class="card-title mb-2 fw-bold">
                                <i class="bi bi-shield-check me-2"></i>
                                {{ site.name }}
                            </h5>
                            <small class="opacity-75">专业管理平台</small>
                        </div>
                        <div class="admin-card-body d-flex flex-column">
                            <p class="card-text flex-grow-1 text-muted">{{ site.description }}</p>
                            <div class="mt-auto">
                                <a href="{{ site.url }}" class="admin-btn btn btn-{{ site.color }} w-100">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    进入后台
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- 功能特性说明 -->
        <div class="container mb-5">
            <div class="info-card">
                <div class="info-card-body">
                    <div class="text-center mb-5">
                        <h3 class="gradient-text fw-bold mb-3">项目亮点特性</h3>
                        <p class="text-muted fs-5">探索Django Admin的无限可能</p>
                    </div>
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-primary rounded-circle p-3 me-3">
                                    <i class="bi bi-layers text-white fs-5"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">多种Admin配置</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li>• 默认Django Admin界面</li>
                                        <li>• 自定义字段显示与排序</li>
                                        <li>• 高级过滤和搜索功能</li>
                                        <li>• 智能批量操作工具</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-success rounded-circle p-3 me-3">
                                    <i class="bi bi-people text-white fs-5"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">权限分离管理</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li>• 超级管理员后台（全权限）</li>
                                        <li>• 产品管理专员后台</li>
                                        <li>• 订单处理专员后台</li>
                                        <li>• 用户管理专员后台</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-warning rounded-circle p-3 me-3">
                                    <i class="bi bi-palette text-white fs-5"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">界面优化体验</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li>• 图片预览和缩略图</li>
                                        <li>• 彩色状态标签显示</li>
                                        <li>• 数据统计仪表板</li>
                                        <li>• 响应式移动适配</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-4">
                                <div class="bg-info rounded-circle p-3 me-3">
                                    <i class="bi bi-lightning text-white fs-5"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">高级定制功能</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li>• 内联编辑和批量操作</li>
                                        <li>• 自定义过滤器和操作</li>
                                        <li>• 数据导出和报表生成</li>
                                        <li>• 日期层次导航系统</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录信息 -->
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-xl-6 mx-auto">
                    <div class="info-card">
                        <div class="info-card-body text-center">
                            <div class="mb-4">
                                <div class="bg-primary bg-gradient rounded-circle p-4 d-inline-flex mb-3">
                                    <i class="bi bi-key-fill text-white fs-2"></i>
                                </div>
                                <h4 class="gradient-text fw-bold">登录信息</h4>
                                <p class="text-muted">使用以下凭据登录任意管理后台</p>
                            </div>

                            <div class="row g-3">
                                <div class="col-sm-4">
                                    <div class="bg-light rounded-3 p-3">
                                        <i class="bi bi-person-circle text-primary mb-2 fs-4"></i>
                                        <h6 class="fw-bold text-primary mb-1">用户名</h6>
                                        <code class="bg-white px-2 py-1 rounded">admin</code>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="bg-light rounded-3 p-3">
                                        <i class="bi bi-shield-lock text-success mb-2 fs-4"></i>
                                        <h6 class="fw-bold text-success mb-1">密码</h6>
                                        <code class="bg-white px-2 py-1 rounded">admin123</code>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="bg-light rounded-3 p-3">
                                        <i class="bi bi-envelope text-warning mb-2 fs-4"></i>
                                        <h6 class="fw-bold text-warning mb-1">邮箱</h6>
                                        <code class="bg-white px-2 py-1 rounded">admin@example.com</code>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 p-3 bg-light rounded-3">
                                <small class="text-muted">
                                    <i class="bi bi-info-circle me-1"></i>
                                    所有管理后台均使用相同的登录凭据，但拥有不同的权限和功能访问范围
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            // 添加页面加载动画
            const cards = document.querySelectorAll('.admin-card, .feature-card, .info-card');
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                    }
                });
            }, { threshold: 0.1 });

            cards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'all 0.6s ease';
                observer.observe(card);
            });

            // 添加鼠标追踪效果
            document.addEventListener('mousemove', (e) => {
                const cursor = document.querySelector('.cursor-effect');
                if (!cursor) {
                    const cursorEl = document.createElement('div');
                    cursorEl.className = 'cursor-effect';
                    cursorEl.style.cssText = `
                        position: fixed;
                        width: 20px;
                        height: 20px;
                        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
                        border-radius: 50%;
                        pointer-events: none;
                        z-index: 9999;
                        transition: transform 0.1s ease;
                    `;
                    document.body.appendChild(cursorEl);
                }

                const cursor2 = document.querySelector('.cursor-effect');
                cursor2.style.left = e.clientX - 10 + 'px';
                cursor2.style.top = e.clientY - 10 + 'px';
            });
        });
    </script>
</body>
</html>
